<!DOCTYPE html>
<head>
	<link type="text/css" rel="stylesheet" href="/css/main.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
    $(function() {
        $('#graphTitle').change(function(){
            $('#fetchResult').text('');
            $('#graphTitleLabel').css('color', '');
        });
        $('#graphUrl').change(function(){
            $('#fetchResult').text('');
            $('#graphUrlLabel').css('color', '');
        });
        $('#graphRegexp').change(function(){
            $('#fetchResult').text('');
            $('#graphRegexpLabel').css('color', '');
        });
        $( "#testPollBtn" ).click(function( event ) {
            graphUrl = document.getElementById('graphUrl').value;
            graphRegexp = document.getElementById('graphRegexp').value;
            if (graphUrl == "" || graphUrl == null) {                
                $('#graphUrlLabel').css('color', 'red');
            } else {
                $.ajax({
                    type: "POST",
                    url: "/inputExpCheck",
                    dataType: "json",
                    data: JSON.stringify({'graphUrl': graphUrl, 'graphRegexp': graphRegexp})
                }).success(function( resp ) {
                    $('#fetchResult').text(resp);
                }).fail(function(resp){
                    $('#fetchResult').text('(Fetch failed!)');
                });
            }
        });
    });
    </script>
</head>
{% autoescape true %}
<html>
  <body>
    <div style='float:left;width:100%;'>
      <div style="float:left;width:100%;">
        <div style="float:left;"><h2 style="margin-left: 40px;">Kooddle</h2></div>
        <div style="float:right;">{% if allowCreate %}Hi,{{currentUser.nickname()}}{% endif %} <a href="{{ url|safe }}">{{ url_linktext }}</a></div>
      </div>
    <div style="float:left;width:100%;"><hr></div>
    </div>
    
 <div style="float:left;display:inline-block;width:100%;">Current: <a href="/graph" >All Graphs</a> > {{ graph.title }}</div>
 <div style='float:left;width:100%;'><hr></div>
 <div style='float:left;margin-left:50px; margin-top:20px;'>
    <form action="/graph/{{graph.key.id()}}/edit" method="post">        
        <div align="right" style="display:inline-block; width:140px;">Source URL :</div><div style="display:inline-block"><input name="graphUrl" id="graphUrl" value="{{ graph.url }}" size="128"></div><br/>
        <div align="right" style="display:inline-block; width:140px;">RegExp :</div><div style="display:inline-block"><input name="graphRegexp" id="graphRegexp" value="{{ graph.regexp }}" size="80"></div>
        <div style="display:inline-block"><button id='testPollBtn' type='button'>Try fetch</button></div><div style="display:inline-block" id='fetchResult'></div><br/>
        <div align="right" style="display:inline-block; width:140px;">Frequency :</div><div style="display:inline-block"><select name="graphFrequency" id = "graphFrequency" value="{{ graph.frequency }}">
            <option value="hourly" {% if graph.frequency == 'hourly' %} selected="selected" {% endif %}>hourly</option>
            <option value="daily" {% if graph.frequency == 'daily' %} selected="selected" {% endif %}>daily</option>
            <option value="monthly" {% if graph.frequency == 'monthly' %} selected="selected" {% endif %}>monthly</option>
        </select></div><br/>
        <div align="right" style="display:inline-block; width:100%;"><input type="submit" value="submit"><div>
    </form>
  </div>

  </body>
</html>
{% endautoescape %}